Javascript Pane

Description

JavaScript added to the List's Javascript Pane lives with the List control, making it easy to copy the List control from one UX component.

Discussion

JavaScript defined at the UX Component level is not specific to any one control in the component. While all functions defined at the component level can be used by Lists, any functions referenced by a List are not copied when the List control is copied to a new component. The Javascript Pane allows you to define JavaScript at the object level that will be stored with the List control. Any JavaScript stored this way will be inclued with the List control when it is copied to another component.

JavaScript defined at the object level is also added as a method to the List control object. This prevents potential name collisions bewteen components. Multiple Lists can define functions with the same name without worrying about overwritting any existing functions in the global namespace.

Functions are managed using the Add Function, Delete Function and Change function name tools on the Javascript pane. User-defined list methods must have a unique function name.

If the function includes argumets, they can be specified as a comma-delimited list in the Function arguments text box.

To invoke a function defined at the This object level, a pointer to the List Control's JavaScript object is required. If the function is called from within one of the List's events, the this object can be used as it is typically the List object:

this.myFunctionName();

If the this object does not point to the List Control, the List's JavaScript object will need to be retrieved. This is done using the {dialog.object}.getControl() method:

var lobj = {dialog.object}.getControl('LIST1');
if (lobj) { // if the list object exists
    lobj.myFunctionName();
}

Functions can also be called at the object level in a List template using the [scope] directive. For example:

{[scope].myFunctionName}